import { AfterViewInit, Component, ElementRef, ViewChild } from "@angular/core"
import { select, Store } from "@ngrx/store"
import { fromEvent, Observable } from "rxjs"
import { filter, map } from "rxjs/operators"
import { AppState } from "./store"
import { addTodo, deleteTodo, todoFinish } from "./store/actions/todo.actions"
import { Todo } from "./store/reducers/todo.reducer"
import { selectTodos } from "./store/selectors/todo.selectors"

@Component({
	selector: "app-root",
	templateUrl: "./app.component.html",
	styles: []
})
export class AppComponent implements AfterViewInit {
	@ViewChild("AddTodoInput") AddTodoInput!: ElementRef
	todos: Observable<Todo[]>

	constructor(private store: Store<AppState>) {
		this.todos = this.store.pipe(select(selectTodos))
	}

	ngAfterViewInit() {
		fromEvent<KeyboardEvent>(this.AddTodoInput.nativeElement, "keyup")
			.pipe(
				filter((event: KeyboardEvent) => event.key === "Enter"),
				map((event) => (<HTMLInputElement>event.target).value),
				map((title) => title.trim()),
				filter((title) => title !== "")
			)
			.subscribe((title) => {
				this.store.dispatch(addTodo({ title }))
				this.AddTodoInput.nativeElement.value = ""
			})
	}

	deleteTodo(id: string) {
		this.store.dispatch(deleteTodo({ id }))
	}

	todoFinish(id: string) {
		this.store.dispatch(todoFinish({ id }))
	}
}
